<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('商城')}}</view>
			<view class="back"></view>
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="banner_box">
				<image v-if="lang=='tc'" src="../../static/banner04_tc.png" mode="widthFix"></image>
				<image v-if="lang=='en'" src="../../static/banner04_en.png" mode="widthFix"></image>
			</view>

			<view class="nav" :class="scrrol == true ? 'scrrolHeader02' : ''">
				<view class="navauto">
					<block v-for="(item, index) in nav" :key="index">
						<view class="menu" :data-index="index" @tap="setNavMenu">
							<view class="text" :class="index == select ? 'menucolor' : ''">{{ item.name }}</view>
							<view class="line" :class="index == select ? 'menucolor02' : ''">
								<image src="../../static/xiao.png" mode="widthFix"></image>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="clear_box02" v-if="scrrol == true"></view>

			<view class="goods_box">
				<block v-for="(item, index) in goods_list">
					<view class="goods" :data-url="'/pages/mall/goods?id='+item.id" @click="gotopage">
						<view class="goods_img">
							<image :src="item.goods_img" mode="scaleToFill"></image>
						</view>
						<view class="title">{{item.goods_name}}</view>
						<!-- <view class="inventory">庫存數量：{{item.inventory}}件</view> -->
						<view class="money_box">
							<view class="text">{{Lang.lang('售價')}}</view>
							<view class="money">{{item.goods_price}} YYDZ</view>
						</view>
						<view class="menu">{{Lang.lang('立即購買')}}</view>
					</view>
				</block>
			</view>

		</view>

		<view class="suspension">
			<view class="menu" data-url="/pages/mall/order/order" @click="gotopage">
				<view class="icon iconfont icon-dingdan"></view>
				<view class="text">{{Lang.lang('訂單')}}</view>
			</view>
			<view class="menu" data-url="/pages/index/index" @click="gotopage02">
				<view class="icon iconfont icon-shouye"></view>
				<view class="text">{{Lang.lang('首頁')}}</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: 0,
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				nav: [],
				goods_list: []
			}
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			this.lang = uni.getStorageSync('_language');
			that.loadShopCategory();
		},
		methods: {
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.shopGoodsList()

			},
			loadShopCategory() {
				let that = this;
				that.Net._post('api/shop/shopCategory', {}, res => {
					if (res.code == 200) {
						// console.log(res);
						that.nav = res.data.list
						that.shopGoodsList()

					}
				});
			},
			shopGoodsList() {
				let that = this;
				that.Net._post('api/shop/shopGoodsList', {
					category_id: that.nav[that.select].id
				}, res => {
					if (res.code == 200) {
						// console.log(res);
						that.goods_list = res.data.list

					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage02(e) {
				let url = e.currentTarget.dataset.url;
				uni.switchTab({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.clear_box02 {
		height: 13.5vw;
	}

	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.banner_box {
		width: 100%;
	}

	.banner_box image {
		width: 100%;
	}

	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		/* position: fixed;
		left: 0;
		top: calc(13vw + var(--status-bar-height));
		z-index: 99; */
		box-sizing: border-box;
	}

	.scrrolHeader02 {
		position: fixed;
		left: 0;
		top: calc(17vw + var(--status-bar-height));
		z-index: 99;
		background-color: #1A1A1A;
	}

	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}

	.nav .navauto .menu {
		width: 20vw;
		position: relative;
	}

	.nav .navauto .menu .text {
		font-size: 4vw;
		color: #fff;
		text-align: center;
		line-height: 13.5vw;
	}

	.nav .navauto .menu .line {
		width: 25%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 12.5%);
		bottom: 0vw;
		display: none;
	}

	.nav .navauto .menu .line image {
		width: 100%;
	}

	.menucolor {
		color: #fff !important;
		font-weight: bold;
		font-size: 4.5vw !important;
	}

	.menucolor02 {
		display: block !important;
	}

	.goods_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.goods_box::after {
		flex: auto;
		content: '';
	}

	.goods_box .goods {
		width: 48%;
		background-color: #1A1A1A;
		padding: 2vw 2vw 4vw 2vw;
		border-radius: 4vw;
		margin-left: 4%;
		margin-top: 4%;
	}

	.goods_box .goods:nth-child(2n + 1) {
		margin-left: 0;
	}

	.goods_box .goods .goods_img {
		width: 100%;
		height: 40vw;
	}

	.goods_box .goods .goods_img image {
		width: 100%;
		height: 100%;
		border-radius: 4vw;
	}

	.goods_box .goods .title {
		width: 100%;
		padding: 0 2vw;
		font-size: 3.8vw;
		margin-top: 2vw;
		color: #fff;
		font-weight: bold;
		min-height: 10vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods_box .goods .inventory {
		width: 100%;
		padding: 0 2vw;
		font-size: 3.2vw;
		color: #666666;
		margin-top: 2vw;
	}

	.goods_box .goods .money_box {
		display: flex;
		align-items: center;
		width: calc(100% - 4vw);
		margin: 4vw auto 0;
		padding-top: 3vw;
		border-top: 1px solid #404040;
	}

	.goods_box .goods .money_box .text {
		font-size: 3.2vw;
		color: #fff;
	}

	.goods_box .goods .money_box .money {
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
		text-align: right;
	}

	.goods_box .goods .menu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 4vw);
		margin: 4vw auto 0;
		height: 10vw;
		border-radius: 10vw;
		background-color: #7752EC;
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
	}

	.suspension {
		width: 16vw;
		border-radius: 16vw;
		background-color: #2A2A2A;
		padding: 4vw 3vw;
		position: fixed;
		right: 4%;
		bottom: 2%;
		z-index: 99;
	}

	.suspension .menu {
		width: 100%;
	}

	.suspension .menu:nth-child(1) {
		border-bottom: 1px solid #404040;
		padding-bottom: 4vw;
		margin-bottom: 4vw;
	}

	.suspension .menu .icon {
		font-size: 4.5vw;
		color: #fff;
		text-align: center;
	}

	.suspension .menu .text {
		font-size: 3.7vw;
		color: #fff;
		margin-top: 1vw;
		text-align: center;
	}
</style>